<template>
  <div :class="{'is-mobile': showMobilePage}" class="meng-li-order">
    <ListTab v-model="categoryId" :show-header="!showMobilePage" :tabs="categoryList" is-table />
    <AllOrder v-if="categoryId === '-1'" ref="allOrder" />
    <IpOrder v-if="categoryId === '0'" ref="ipOrder" />
    <EmojiOrder v-if="categoryId === '1'" ref="emojiOrder" />
    <CommerceOrder v-if="categoryId === '2'" ref="commerceOrder" />
    <OrderAfterSale v-if="categoryId === '3'" ref="afterSale" />
    <Order v-if="categoryId === '4'" ref="order" />
  </div>
</template>
<script>
import ListTab from '@/components/ListTab';
import AllOrder from './module/allOrder';
import IpOrder from './module/ipOrder';
import EmojiOrder from './module/emojiOrder';
import CommerceOrder from './module/commerceOrder';
import Order from './module/order';
import OrderAfterSale from './module/OrderAfterSale';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';
export default {
  components: { AllOrder, IpOrder, EmojiOrder, CommerceOrder, Order, ListTab, OrderAfterSale },
  data() {
    return {
      categoryId: '-1'
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    categoryList() {
      const isAdmin = this.userInfo.userName === '管理员';
      if (isAdmin) {
        return [
          { id: '-1', name: '全部订单' },
          { id: '0', name: '商务订单' },
          // { id: '1', name: '营销授权' },
          { id: '2', name: '电商销售' },
          { id: '3', name: '电商售后' }
          // { id: '4', name: '渠道订单' }
        ];
      }
      const arr = [];
      if (hasRouteAuth('mengli:allOrder:read') || hasRouteAuth('mengli:allOrder:admin')) {
        arr.push({ id: '-1', name: '全部订单' });
      }
      if (hasRouteAuth('mengli:iPOrder:read') || hasRouteAuth('mengli:iPOrder:admin')) {
        arr.push({ id: '0', name: '商务订单' });
      }
      // if (hasRouteAuth('mengli:emojiOrder:read') || hasRouteAuth('mengli:emojiOrder:admin')) {
      //   arr.push({ id: '1', name: '营销授权' });
      // }
      if (hasRouteAuth('mengli:commerceOrder:read') || hasRouteAuth('mengli:commerceOrder:admin')) {
        arr.push({ id: '2', name: '电商销售' });
      }
      if (hasRouteAuth('mengli:afterSale:read')) {
        arr.push({ id: '3', name: '电商售后' });
      }
      // if (hasRouteAuth('mengli:channelOrder:read') || hasRouteAuth('mengli:channelOrder:admin')) {
      //   arr.push({ id: 4, name: '渠道订单' });
      // }
      return arr;
    }
  },
  // 缓存注释
  beforeRouteEnter(to, from, next) {
    const routeName = ['mengliOrderEdit', 'mengliOrderDetail', 'mengliOrderAdd', 'afterSaleEdit', 'afterSaleDetail', 'afterSaleAdd'];
    if (routeName.includes(from.name)) {
      to.meta.isChange = true;
    } else {
      to.meta.isChange = false;
    }
    next();
  },
  activated() {
    this.$nextTick(() => {
      if (this.$route.query.stop) return;
      // 初始化
      if (!this.$route.meta.isChange) {
        this.categoryId = '';
        this.$nextTick(() => {
          if (this.$route.query && this.$route.query.categoryId) {
            this.categoryId = this.$route.query.categoryId;
          } else if (this.categoryList && this.categoryList.length) {
            this.categoryId = this.categoryList[0].id.toString();
          }
          // const orderType = this.$route.query.type;
          // if (orderType || orderType === 0) {
          //   this.categoryId = orderType.toString();
          // }
        });
      } else {
        const map = {
          '-1': 'allOrder', '0': 'ipOrder', '1': 'emojiOrder', '2': 'commerceOrder', '3': 'afterSale', '4': 'order'
        };
        if (map[this.categoryId]) {
          this.loadMore(map[this.categoryId]);
        }
        // if (this.categoryId === '-1') {
        //   this.loadMore('allOrder');
        // } else if (this.categoryId === '0') {
        //   this.loadMore('ipOrder');
        // } else if (this.categoryId === '1') {
        //   this.loadMore('emojiOrder');
        // } else if (this.categoryId === '2') {
        //   this.loadMore('commerceOrder');
        // } else if (this.categoryId === '4') {
        //   this.loadMore('order');
        // }
      }
    });
  },
  created() {
    this.formatQuery(); // 库存详情跳转
  },
  methods: {
    formatQuery() {
      const { stop } = this.$route.query;
      if (stop) { // 萌力库存跳转
        this.categoryId = '2';
        this.$nextTick(() => {
          this.loadMore('commerceOrder');
        });
      }
    },
    loadMore(name) {
      if (this.$refs[name].list && this.$refs[name].list.items && this.$refs[name].list.items.length === 0) {
        this.$refs[name].fetchData(true);
      } else {
        this.$refs[name].fetchData();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.meng-li-order {
  &.is-mobile {
    &::v-deep {
      .el-pagination {
        padding: 2px 5px !important;
      }
    }
  }
  .tab-list {
    background-color: #fff;
    padding: 0 20px;
    display: flex;
    box-shadow: 0px 2px 0px 0px rgba(245, 245, 245, 1);
    & ::v-deep {
      .el-tabs {
        width: 100%;
      }
      .el-tabs__content {
        display: none;
      }
      .el-tabs__header {
        margin-bottom: 0;
      }
      .el-tabs__nav {
        padding-top: 4px;
        padding-bottom: 4px;
      }
      .el-tabs__nav-wrap {
        &::after {
          display: none;
        }
      }
      .el-tabs__item {
        font-size: 16px;
        color: #333;
        padding: 0 16px;
        font-weight: 300;
        font-family: PingFangSC-Light, PingFang SC;
        &.is-active {
          color: #406eff;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
        }
      }
    }
  }
}

</style>
